<template>
  <basic-container class="interFace" v-loading="loading" element-loading-text="数据加载中...">
    <dataList ref="interFace" hideFilterBtn :pageInfo="pager" :listData="tableData" :menuList="[]" :listLayout="['menu','filter']" :filterList="filterList">
      <template v-slot:searchbtn>
        <el-button  size="small" @click="handleMenuClick">测试</el-button>
      </template>
      <el-table :data="tableData" align="left" ref="multipleTable">
        <el-table-column label="序号" type="index" :index="getIndex" width="55" />
        <el-table-column label="接口标识" prop="interfaceLabel" width="180">
          <template slot-scope="scope">{{getCardTypeValue(scope.row.interfaceLabel,interFaceList)}}</template>
        </el-table-column>
        <el-table-column label="请求参数" prop="requestParam" min-width="180" />
        <el-table-column label="接口调用耗时" prop="interfaceCallTime" width="150" />
        <el-table-column label="接口调用结果" prop="callResult" width="150">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="getCardTypeValue(scope.row.callResult,callResultList)">
              <el-tag size="medium">{{ getCardTypeValue(scope.row.callResult,callResultList) }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="数据处理耗时" prop="dataHandleTime" width="150" />
        <el-table-column label="数据处理结果" prop="handleResult" width="150">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="getCardTypeValue(scope.row.handleResult,handleResultList)">
              <el-tag size="medium">{{ getCardTypeValue(scope.row.handleResult,handleResultList) }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="调用时间" prop="createTime" width="180" />
        <el-table-column width="120" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" v-if="getPermissions('interfacecalllog_get')" @click="handleLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <v-dialog :show.sync="dialogVisible" width="1000px" title="查看">
      <el-form ref="dictForm" :model="tableOption" label-width="80px" class="form-wrap">
        <el-form-item label="接口标识" prop="interfaceLabel">
          <span class="in_txt">{{getCardTypeValue(tableOption.interfaceLabel,interFaceList)}}</span>
        </el-form-item>
        <el-form-item label="请求参数" prop="requestParam">
          <span class="in_txt">{{tableOption.requestParam}}</span>
        </el-form-item>
        <el-form-item label="接口调用耗时" prop="interfaceCallTime">
          <span class="in_txt">{{tableOption.interfaceCallTime}}</span>
        </el-form-item>
        <el-form-item label="接口调用结果" prop="callResult">
          <span class="in_txt">getCardTypeValue(tableOption.callResult,callResultList)</span>
        </el-form-item>
        <el-form-item label="数据处理耗时" prop="dataHandleTime">
          <span class="in_txt">{{tableOption.dataHandleTime}}</span>
        </el-form-item>
        <el-form-item label="数据处理结果" prop="handleResult">
          <span class="in_txt">{{getCardTypeValue(tableOption.handleResult,handleResultList)}}</span>
        </el-form-item>
        <el-form-item label="调用时间" prop="createTime">
          <span class="in_txt">{{tableOption.createTime}}</span>
        </el-form-item>
      </el-form>
    </v-dialog>
  </basic-container>
</template>

<script>
import { fetchList, getInterTest  } from '~/admin/api/interfacecalllog'
export default {
  name: "interFace",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData()
    this.interFaceList = this.getDict('interface_label')
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      filterList: [
        { label: '接口标识', inputType: 'dict', dictName: 'interface_label', name: 'interfaceLabel', placeholder: '请选择接口标识', defaultValue: '' },
        { label: '接口调用结果', inputType: 'select', name: 'callResult', placeholder: '请选择接口调用结果', children: [{ label: '成功', value: 'Y' }, { label: '失败', value: 'N' }], defaultValue: '' },
        { label: '数据处理结果', inputType: 'select', name: 'handleResult', placeholder: '请选择数据处理结果', children: [{ label: '成功', value: 'Y' }, { label: '失败', value: 'N' }], defaultValue: '' },
        //{ label: '调用时间', inputType: 'date', name: 'createTime', placeholder: '请选择调用时间', defaultValue: '' },
        { label: '接口调用日期', inputType: 'daterange', name: ['start','end'],  defaultValue: ['',''] },

      ],
      // 页面loading
      loading: false,
      // 弹窗
      dialogVisible: false,
      // 字典
      interFaceList: [],
      callResultList: [
        {
          "label": "成功",
          "value": "Y"
        },
        {
          "label": "失败",
          "value": "N"
        }
      ],
      handleResultList: [
        {
          "label": "成功",
          "value": "Y"
        },
        {
          "label": "失败",
          "value": "N"
        }
      ],
      tableOption: {}
    }
  },
  methods: {
    async handleMenuClick(){
      let data = await getInterTest()
    },
    // 获取列表
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      let obj = {}
      for (let key in requestData) {
        if ((requestData[key] === 0 || requestData[key]) && requestData[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
          obj[key] = requestData[key]
        }
      }
      requestData = obj
      fetchList(requestData)
        .then(res => {
          const { total, current, size, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //字典值转换
    getCardTypeValue (num, sum) {
      let obj = sum.find(it => it.value === num)
      if (obj) {
        return obj.label
      }
      return ''
    },
    // 查看
    handleLook (row) {
      this.tableOption = row
      this.dialogVisible = true
    },
    // 获取索引值
    getIndex (index) {
      const { current = 0, size = 0 } = this.pager
      return (current - 1) * size + (index + 1)
    }
  }
}
</script>

<style scoped lang="scss">
.interFace {
  @include formWrap(2);
  .in_txt {
    color: #999;
  }
  /deep/ .el-tag {
    background-color: #eef9e8;
    border-color: #dcf3d1;
    color: #52c41a;
  }
}
</style>
